<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { listByIds } from "~/api/oss";

const props = defineProps({
  title: {
    type: String,
    default: '文档文件'
  },
  ossid: {
    type: [String, Number],
    required: true
  },
  fileSize: {
    type: [String, Number],
    default: 0
  },
  originalName: {
    type: String,
    default: ''
  },
  mainPic: {
    type: String,
    default: ''
  }
});

const fileUrl = ref('');
const originalName = ref('');
const thumbUrl = ref('');
const loading = ref(true);

const fetchFileUrl = async () => {
  try {
    loading.value = true;
    const response = await listByIds(props.ossid.toString());
    if (response && response.data && response.data.length > 0) {
      fileUrl.value = response.data[0].url;
      originalName.value = response.data[0].originalName;
    }
  } finally {
    loading.value = false;
  }
};

const fetchThumbUrl = async () => {
  if (!props.mainPic) return;
  if (props.mainPic.includes('http')) {
    thumbUrl.value = props.mainPic;
    return;
  }
  const res = await listByIds(props.mainPic.toString());
  if (res && res.data && res.data.length > 0) {
    thumbUrl.value = res.data[0].url;
  }
};

onMounted(() => {
  fetchFileUrl();
  fetchThumbUrl();
});

const openDocument = () => {
  if (fileUrl.value) {
    window.open(fileUrl.value, '_blank');
  }
};

const formattedSize = computed(() => {
  if (!props.fileSize) return '';
  return typeof props.fileSize === 'number'
    ? (props.fileSize > 1024 * 1024
        ? (props.fileSize / (1024 * 1024)).toFixed(1) + 'MB'
        : (props.fileSize / 1024).toFixed(1) + 'KB')
    : props.fileSize;
});
</script>

<template>
	<div class="doc-item" @click="openDocument">
		<div class="thumb">
			<img v-if="thumbUrl" :src="thumbUrl" class="thumb-img" alt="" loading="lazy" />
			<div v-else class="thumb-placeholder"></div>
		</div>
		<div class="caption">
			<p class="file-name">{{ originalName || props.title }}</p>
			<p class="size" v-if="formattedSize">{{ formattedSize }}</p>
		</div>
	</div>
</template>

<style scoped lang="scss">
.doc-item {
  width: 220px;
  height: 300px;
  background: #ffffff;
  border: 1px solid rgba(25, 30, 40, 0.08);
  box-shadow: 0 0 16px rgba(11, 13, 18, 0.06);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-right: 24px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
}

.doc-item:nth-child(5n) {
  margin-right: 0;
}

.doc-item:hover {
  box-shadow: 0 4px 20px rgba(11, 13, 18, 0.12);
  transform: translateY(-2px);
}

.thumb {
  position: relative;
  height: 220px;
}

.thumb-img,
.thumb-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 16px 16px 0 0;
}

.thumb-placeholder {
  background: #f5f5f5;
}

.caption {
  background: #ffffff;
  padding: 10px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.file-name {
  font-size: 14px;
  color: #191e28;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.size {
  color: rgba(25, 30, 40, 0.48);
  font-size: 12px;
  margin-top: 6px;
}
</style>